<template>
  <div class="content">
    <div
      class="title font-16 font-bold"
      v-text="'邀请好友'"
    ></div>
    <div class="shar_box">
        <div class="bot_top toptips">
          <h3 class="font-bold font-20 padd20 colors">通过以下链接推荐其他用户访问本站并注册:</h3>
          <p>1、注册认证20枚系统币(不锁)</p>
          <p>2、邀请好友注册认证成功奖励10枚(不锁)</p>
          <p>3、交易手续费返佣20%</p>
          <h4 class="font-20 padd20 colors font-66">我的邀请码：{{tjCode}}</h4>
        </div>
        <div class="share_code flex">
            <div class="code_left">
                <p class="font-bold font-14 padd20">推荐给用户的注册页面链接：</p>
                <p class="font-16 font-bold h30 styles">{{TGurl}} </p>
                <el-button type="danger" class="copybtn"
                  v-clipboard:copy="TGurl"
                  v-clipboard:success='onSuccess'
                >复制链接</el-button>
                <div class="m-top-10">
                  <!-- <vue-qr
                    v-if="TGurl"
                    :text="TGurl"
                    :margin="10"
                    :size="180"
                  >
                  </vue-qr> -->
                  <vue-qr text="Hello world!" :callback="test" qid="testid"></vue-qr>
                </div>
                <p class="saves m-top-10">保存二维码，去您的社交媒体推广</p>
            </div>  
            <div class="code_left">
                <p class="font-bold font-14 padd20">推荐给用户的手机注册页面链接：</p>
                <p class="font-16 font-bold h30 styles">{{myMlink}} </p>
                <el-button type="danger" class="copybtn" 
                  v-clipboard:copy="myMlink"
                  v-clipboard:success='onSuccess'
                >复制链接</el-button>
                <div class="m-top-10">
                  <!-- <vue-qr
                    v-if="myMlink"
                    :text="myMlink"
                    :margin="10"
                    :size="180"
                    id='qrmcode'
                    :callback="test"
                  >
                  </vue-qr> -->
                  <vue-qr text="Hello world!" :callback="test" qid="testid"></vue-qr>
                </div>
                <p class="saves m-top-10">保存二维码，去您的社交媒体推广</p>
            </div>
        </div>
        <div class="big_codebox ">
            <h4 class=" font-20 font-bold padd01">二维码海报</h4>
            <div class="big_code bot_top">
                <div class="code">
                    <!-- <img src="https://gateio.news/libs/qr_ref.php?uid=1658621&pid=1001&lang=cn" alt="" srcset=""> -->
                    <template>
                      <div>
                          <div ref="box" id="shareImg">
                          <img :src='require("../../assets/images/home/tgbg2.png")' alt="">
                          <div>
                            <img src="../../assets/images/logoimg/logo01.png" alt="" srcset="" class="link_inlogo">
                          </div>
                          <div class="imgs2">
                            <img :src='qrmcodeSrc'  alt="" class="codeimg">
                            <p class="codeimgtxt">邀请码：{{tjCode}}</p>
                          </div>
                          
                          </div>
                          <!--生成的合成图片-->
                          <!-- <img :src="imgUrl" alt=""> -->
                          <!-- <img :src="'data:image/jpeg;base64,' + downloadUrl"/> -->
                      </div>
                    </template>
                    <el-button type="primary" class="m20"   @click="saveImage('box','推广二维码')">点击按钮或截图，保存二维码海报，去社交媒体推广</el-button>
                </div>
            </div>
            <div class="shar_txt">
                <h4 class="font-20 font-bold colors">推广方法：</h4>
                <p>1. 复制以上任一推广链接，或者下载保存以上二维码，去您的社交媒体推广，让您的朋友们通过此链接访问本站并注册。</p>
                <p>2. 移动端扫码以上二维码，可以直接注册。也可以使用浏览器分享功能或是微信扫码功能进行分享。
                    点击微信右上角菜单，在弹窗的对话框中，点击发送给朋友、分享到朋友圈、分享到手机QQ或者分享到QQ空间即可。</p>
            </div>
            <div class="reward">
              <ul>
                <li>已邀请人数</li>
                <li>{{lists}}</li>
              </ul>
              <!-- <ul>
                <li>获得返佣</li>
                <li><em>¥</em>0.00</li>
              </ul> -->
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="邀请记录" name="first">
        <!-- <div class="firsts">
          <span>邀请时间</span>
          <span>账号</span>
          <span></span>
        </div>
        <ul class="history">
          <li>2017-02-15 15:10</li>
          <li>59.173.30.136</li>
          <li></li>
        </ul>
        <ul class="history">
          <li>2017-02-15 15:10</li>
          <li>59.173.30.136</li>
          <li></li>
        </ul> -->
        <el-table
        v-loading='showLoading'
        max-height='500'
        :header-cell-style="{'background-color':'#303030','font-weight':'bold'}"
        :data='myEnstrumentData'
      > 
        <el-table-column
          :label='"时间"'>
          <template slot-scope="scope">
            {{scope.row.wdate}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"流水号"'>
          <template slot-scope="scope">
            {{scope.row.id}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"编号"'>
          <template slot-scope="scope">
            {{scope.row.autoid}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"推荐者"'>
          <template slot-scope="scope">
            {{scope.row.frommember}}
          </template>
        </el-table-column>
      </el-table>
      </el-tab-pane>
      <el-tab-pane label="返佣记录" name="second">
        <el-table
        v-loading='showLoading'
        max-height='500'
        :header-cell-style="{'background-color':'#303030','font-weight':'bold'}"
        :data='myEnstrumentDatas'
      > 
        <el-table-column
          :label='"时间"'>
          <template slot-scope="scope">
            {{scope.wdate}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"币种"'>
          <template slot-scope="scope">
            {{scope.coin}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"数量"'>
          <template slot-scope="scope">
            {{scope.number}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"来源"'>
          <template slot-scope="scope">
            {{scope.frommember}}
          </template>
        </el-table-column>
        <el-table-column
          :label='"编号"'>
          <template slot-scope="scope">
            {{scope.autoid}}
          </template>
        </el-table-column>
      </el-table>
      </el-tab-pane>
    </el-tabs>
            
        </div>
    </div>
  </div>
</template>
<script>
import VueQr from "vue-qr";
import html2canvas from 'html2canvas';
export default {
  components: { VueQr },
  data() {
    return {
      activeName: 'first',
      userData: "",
      showLoading: true,
      myEnstrumentData: [],
      myEnstrumentDatas: [],
      TGurl:'',
      myMlink:'',
      tjCode:'',
      imgUrl:'',
      lists:'',
      qrmcodeSrc:'',
      commissionList: [],
      // 测试
      shopPic:'',
      rowData:'',
      downloadUrl:'',
      divText:'box',
      imgText:'好友推广二维码'
    };
  },
  mounted() {
    this.request(this.api.getmyrecom,{pagesize:'20',pagecode:'1'}).then(res => {
      this.showLoading = false;
      if (res && res.code != "0") {
        this.getDataFaild(res.msg);
        return false;
      }
      res.data && res.data.list && (this.myEnstrumentData = res.data);
    });
    this.request(this.api.getmyrecommoney,{pagesize:'20',pagecode:'1'}).then(res => {
      this.showLoading = false;
      if (res && res.code != "0") {
        this.getDataFaild(res.msg);
        return false;
      }
      res.data && res.data.list && (this.myEnstrumentDatas = res.data);
    });
    this.showLoading = true;
    this.Getsharecode();
    // 生成二维码
    // this.getMyPCcode();
    this.CreateCode();
    this.test();//获取database64 url
    // 合并二维码
    // this.draw();
  },
  methods: {
    test(dataUrl,id){
            console.log(url, id)
        },
    handleSelect(key) {
      this.navigateTo(key);
    },
    onSuccess() {
      this.successMsg("复制成功");
    },
    test(dataUrl,id){
        // console.log(dataUrl, id);
        this.qrmcodeSrc=dataUrl;
        // console.log(this.qrmcodeSrc);
        this.draw()
    },
    // pc分享链接
    // getMyPCcode(){
    //   this.request(this.api.getuserinfo).then(res => {
    //     try {
    //       this.userData = res.data.userinfo;
    //       this.TGurl = this.api.qrUrl +'#/user/register/?rid='  + this.userData[0].sharecode;
    //       // console.log(this.api);
    //       // 推广链接
    //       // console.log(this.TGurl);
    //     } catch (err) {}
    //   })
    // },
    // 手机分享链接
    Getsharecode(){
      this.request(this.api.getrecomcode).then(res => {
        if (res.code == "0") {
          this.myMlink = res.data[0].appurl;
          this.TGurl = res.data[0].weburl;
          this.tjCode = res.data[0].recomcode;
          this.lists = res.data[0].countmember;
        }
      })
    },
    CreateCode(){
      // 生成Qrcode
      if (this.TGurl) return false;
        this.$bus.on("qrCodeLoad", url => {
          url && (this.TGurl = url);
      });
      // 手机码
      if (this.myMlink) return false;
        this.$bus.on("qrCodeLoad", url => {
          url && (this.myMlink = url);
      });
    },
    draw(){
      if(this.qrmcodeSrc) return
        var that = this;
        if(this.qrmcodeSrc) return
        html2canvas(that.$refs.box).then(function(canvas) {
          that.imgUrl = canvas.toDataURL()//将canvas转为base64图片(eg. )
        });
    },
    //下载店铺码
    // downLoadShopPic(){
    //   var myCanvasShopPic  = document.getElementById("myCanvasShopPic");
    //   var dataURL = myCanvasShopPic.toDataURL("image/png");
    //   var saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    //   saveLink.href = dataURL;
    //   saveLink.download = 'downLoad.png';
    //   saveLink.click();
    // },
    //下面是methods中的内容
      //图片转换格式的方法 直接使用就好  不需要知道为什么
       dataURLToBlob(dataurl) {
            let arr = dataurl.split(',');
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        },
        /*保存图片的方法（即按钮点击触发的方法）   
          第一个参数为需要保存的div的id名  
          第二个参数为保存图片的名称 */
        saveImage(divText, imgText) {
            let canvasID = this.$refs[divText];
            let that = this;
            let a = document.createElement('a');
            html2canvas(canvasID).then(canvas => {
                let dom = document.body.appendChild(canvas);
                dom.style.display = 'none';
                a.style.display = 'none';
                document.body.removeChild(dom);
                let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
                a.setAttribute('href', URL.createObjectURL(blob));
                //这块是保存图片操作  可以设置保存的图片的信息
                a.setAttribute('download', imgText+this.tjCode + '.png');//二维码图片名称
                document.body.appendChild(a);
                a.click();
                URL.revokeObjectURL(blob);
                document.body.removeChild(a);
            });
        },
  
  }
};
</script>
<style lang="scss" scoped>
.table-wrap {
  border: $default-border;
  border-bottom: none;
}
.title {
  margin-bottom: 25px;
  color: #D5D5D5;
  font-size: 18px;
  font-weight: bold;
}
.bot_top{
    border-top: 1px solid #303030;
}
.colors {
  color: #D5D5D5!important;
}
.padd20{padding: 15px 0;color: #727272;}
.padd01{padding: 15px 0;color: #D5D5D5;}
.text_cen{text-align: center;}
.toptips {
  p{line-height: 24px;color: #727272;font-size: 15px;
    font-weight: bold;}
}
.saves {
  color: #727272;
}
.code_left{width: 50%;}
.copybtn{margin: 15px 0 0 30px;background-color: #D7B379;border: 0;}
// big_code
.big_code{
    img{width: 350px;}
    padding: 15px;
}
.copybtn{color: #ffffff;background-color: #D7B379;}
.h40{height: 40px;}
.h30{height: 30px;}
.shar_txt{
  p{line-height: 24px;color: #727272;}
}
.font-66 {
  font-weight: bold;
}
.big_codebox{
  position: relative;
  .codeimg{
    width: 150px;
  }
  .imgs2{position: absolute;
    left: 115px;
    top: 285px;
  }
  .codeimgtxt{color: #e0b87f;line-height: 20px;width: 151px;text-align: center;margin-top: 10px;}
  .link_inlogo{width: 130px;position: absolute;left:120px;top: 110px;}
}
#shareImg{
  width: 350px;
  height: 560px;
  }
  .m20{margin-top: 50px;background-color: #D7B379;border: 0;}
.reward {
  margin: 25px 0;
  ul {
    width: 250px;
    height: 100px;
    display: inline-block;
    padding: 20px;
    border: 8px solid #232323;
    margin-right: 65px;
    li:nth-child(1) {
      color: #C9C9C9;
    }
    li:nth-child(2) {
      color: #DEDEDE;
      font-size: 45px;
      margin-top: 35px;
      // font-weight: bold;
      em {
        font-size: 25px;
      }
    }
  }
}
.firsts {
  display:flex;
  display:-webkit-flex;
  justify-content: space-between;
  span {
    color: #595959;
  }
}
.history {
  display:flex;
  display:-webkit-flex;
  justify-content: space-between;
  margin: 15px 0;
  li {
    display: inline-block;
    color: #BEBEBE;
  }
}
.styles {
  color: #5D72D6
}
.imgS {
  width: 100%;
}
.regulation {
  border: 1px solid #D6B279;
  margin-top: 15px;
  width: 100%;
  th {
    color: #FFF;
    height: 50px;
    border: 1px solid #D6B279;
    font-weight: bold;
    font-size: 20px;
    line-height: 50px;
  }
  td {
    border: 1px solid #D6B279;
    line-height: 50px;
    color: #ccc;
    padding: 25px;
    font-size: 15px;
    font-weight: bold;
  }
}
</style>
